<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>保亿家</title>
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <link rel="stylesheet" href="./css/payrecord.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/utils.css">
</head>
<style>
    .imgplus {
        position: absolute;
        bottom: 0.1rem;
    }
</style>

<body>
    <div class="header">

        <div class="back">
            <img src="./img/返回.png" alt="">
        </div>

        充值记录
    </div>
    <div class="page">

    </div>
    <div class="shadow"></div>
    <div class="alert">
        <div class="alert1">提示</div>
        <div class="alert2">你确定要删除订单吗</div>
        <div class="alert-select">
            <div class="cancel">取消</div>
            <div class="confirm">确定</div>
        </div>
    </div>
</body>

</html>
<script src="./js/rem.js"></script>
<script src="./js/jquery.min.js"></script>
<script src="./js/url.js"></script>
<script src="./js/rotate.js"></script>
<script>
    var openid = GetRequest().openid
    var page = document.querySelector(".page")

    var body = document.querySelector("body")
    var img = document.querySelectorAll("img")
    //图片加时间戳
    for (var i = 0; i < img.length; i++) {
        var timestamp = Date.parse(new Date());

        img[i].src = img[i].src + '?' + timestamp
    }

    if (!is_weixin()) {
        console.log("不是从微信进入的")
        body.style.display = "block"
        body.innerHTML = `<div style="margin-top:0.2rem;margin-left:0.2rem">请从正确入口进入<div>`

    }
    list() //请求列表
    function list() {
        $.ajax({
            method: "post",
            url: url + "?s=App.BYJTel.OrderList",
            data: {
                openid: openid
            },
            dataType: 'json',
            success: (res) => {
                let template = ''
                console.log(res.data.retData)
                if (res.data.retData == '') {
                    console.log(1)
                    body.style.background = "#ededed"
                    template = `
                        
                        <img width="60%" style="margin:0rem  auto 0.2rem;display:block;padding-top:1rem"src="./img/nopay.png"></img>
                        <div style="margin:0.2rem 0.2rem;text-align:center;color:rgb(117, 117, 117)"> 暂无充值记录..</div>
                            <div > 
                            <image class="imgplus" style="width:100%;height:100rpx" src="./img/red底图.png">
                            </image> <div>
        
                       
                    `
                    // body.innerHTML = template
                }

                res.data.retData.forEach((item, i) => {

                    template +=
                        `<div class="card" >
	<div class="card-top">

		<div class="card-top1"> 话费充值</div>
		<div class="state"></div>
	</div>
	<div class="card-middle">
		<div>
			<image class="card-middle1" src="img/record3.png"></image>
		</div>
		<div class="card-middle2">
			<div>${item.goods_name}</div>
			<div class="card-middle22">充值号码：${item.card_no}</div>
            <div class="time"></div>
		</div>
		<div class="card-middle3">
			<div style="color:red;font-weight:600">￥${(item.or_price / 100).toFixed(2)}</div>
			<div class="card-middle32">￥${(item.or_amount / 100).toFixed(2)}</div>
		</div>
	</div>
	<div class="card-buttom2">
		
		<div class="card-buttom">
			删除订单
		</div>
        <div bindtap="pay" class="pay" data-paynum="${item.or_sn}"> 立即支付</div>
	</div>
</div>`



                }


                )
                if (res.data.retData.length <= 2) {
                    template += `<div > 
                            <image class="imgplus" style="width:100%;" src="./img/red底图.png">
                            </image> <div>`
                } else {
                    template += `<div > 
                            <image style="width:100%;margin-top:0.2rem;margin-bottom:0.1rem" src="./img/red底图.png">
                            </image> <div>`
                }

                page.innerHTML = template
                var pay = document.querySelectorAll(".pay")
                var delpay = document.querySelectorAll(".card-buttom")

                var shadow = document.querySelector(".shadow")
                var alertbox = document.querySelector(".alert")
                var cancel = document.querySelector(".cancel")
                var confirm = document.querySelector(".confirm")
                var time = document.querySelectorAll(".time")
                var border = document.querySelectorAll(".card-buttom2")
                let orid = ''
                //点击删除订单
                for (let i = 0; i < delpay.length; i++) {
                    delpay[i].onclick = function () {
                        shadow.style.display = "block"
                        alertbox.style.display = "flex"

                        console.log(res.data.retData[i].id)
                        orid = res.data.retData[i].id//保存订单号

                    }
                }
                //确认删除订单
                confirm.onclick = function () {

                    $.ajax({
                        method: "post",
                        url: url + "?s=App.BYJTel.CancelOrder",
                        data: {
                            orid: orid
                        },
                        dataType: 'json',
                        success: (res) => {
                            console.log("成功", res)

                            list()
                            shadow.style.display = "none"
                            alertbox.style.display = "none"
                        },//成功后的回调函数
                        error: (res) => {
                            console.log("失败", res)
                        }//失败后的回调函数
                    }
                    )
                }
                // 弹框取消
                cancel.onclick = function () {
                    shadow.style.display = "none"
                    alertbox.style.display = "none"
                }
                //订单状态渲染
                var state = document.querySelectorAll(".state")
                for (let i = 0; i < state.length; i++) {
                    switch (res.data.retData[i].or_state) {
                        case -1:
                            state[i].innerHTML = "已过期"
                            pay[i].style.display = "none"
                            break
                        case 0:
                            state[i].innerHTML = "未支付"
                            state[i].style.color = "#f00"
                            time[i].innerHTML = "下单时间:" + res.data.retData[i].or_add_time
                            break
                        case 2:
                            state[i].innerHTML = "已付款"

                            pay[i].style.display = "none"
                            delpay[i].style.display = "none"
                            border[i].style.border = 0
                            time[i].innerHTML = "充值时间：" + res.data.retData[i].or_pay_time
                            break
                        case 3:
                            state[i].innerHTML = "充值中"
                            state[i].style.color = "red"
                            pay[i].style.display = "none"
                            delpay[i].style.display = "none"
                            border[i].style.border = 0
                            time[i].innerHTML = "充值时间：" + res.data.retData[i].or_pay_time
                            break
                        case 5:
                            state[i].innerHTML = "成功"
                            state[i].style.color = "red"
                            state[i].style.color = "red"
                            pay[i].style.display = "none"
                            delpay[i].style.display = "none"
                            border[i].style.boder = 0
                            time[i].innerHTML = "充值时间：" + res.data.retData[i].or_pay_time
                            break
                        case -5:
                            state[i].innerHTML = "已删除"
                            pay[i].style.display = "none"
                            delpay[i].style.display = "none"
                            border[i].style.border = 0
                            break
                        case -9:
                            state[i].innerHTML = "异常"
                            pay[i].style.display = "none"
                            delpay[i].style.display = "none"
                            border[i].style.border = 0
                            break
                        default:
                            state[i].innerHTML = ""
                            pay[i].style.display = "none"
                            delpay[i].style.display = "none"
                            border[i].style.border = 0
                    }
                }
                //调用支付
                for (let i = 0; i < pay.length; i++) {
                    pay[i].onclick = function () {
                        console.log(this.getAttribute("data-paynum"))
                        $.ajax({
                            method: "post",
                            url: url + "?s=App.BYJTel.JhPay",
                            data: {
                                order_no: this.getAttribute("data-paynum"),

                            },
                            dataType: 'json',
                            success: (res) => {
                                console.log("成功", res)
                                var payId = res.data.retData.payId
                                var payTok = res.data.retData.payTok

                                window.location.href = "https://api.cardwinner.com/pay?payid=" + payId + "&paytok=" + payTok + "&payway=wx&paytype=JSAPI"
                            },//成功后的回调函数
                            error: (res) => {
                                console.log("失败", res)
                            }//失败后的回调函数
                        }
                        )
                    }
                }

            },//成功后的回调函数
            error: (res) => {
                console.log("失败", res)
            }//失败后的回调函数
        }
        ).then(() => {

        })
    }
    //列表渲染

    var back = document.querySelector(".back")
    back.onclick = function () {
        var timestamp = Date.parse(new Date());

        window.location.href = "pay.html?_=" + timestamp
    }
    //判断是否为微信客户端
    function is_weixin() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger")
            return true;
        else
            return false;
    }
    function GetRequest() {

        var url = location.search;
        //获取url中"?"符后的字串  
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);

            }
        }
        return theRequest;

    }
</script>